<template>
  <div>
    <NewsHeader @getSearchVal="searchVal = $event"/>

    <NewsTime />

    <el-row>
      <el-col :span="5" class="border"> <NewsMenu /> </el-col>
      <el-col :span="19" class="ps-1">
        <el-card
          shadow="hover"
          v-for="news in newsli"
          :key="news.newsId"
          class="mb-2"
        >
          <el-row>
            <el-col :span="24" class="fs-3">{{ news.newsTitle }} </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="mt-2"
              ><img class="w-75" :src="news.headUrl" />
            </el-col>
            <el-col :span="20" class="mt-2">
              {{ news.newsIntro }}
            </el-col>
          </el-row>
          <el-row class="mt-2">
            <el-col :span="6" class="ps-2">{{ news.publishTime }}</el-col>
            <el-col :span="2" :offset="1">
              <el-icon class="h-100" @click="getlike(news.newsId)"><Pointer /></el-icon>
              {{ news.likeNum }}
            </el-col>
            <el-col :span="2" :offset="1">
              <el-icon class="h-100" @click="getcollect(news.newsId)"><Star /></el-icon>
              {{ news.commentNum }}
            </el-col>
            <el-col :span="2" :offset="1">
              <el-icon class="h-100"><ChatDotSquare /></el-icon>
              {{ news.viewNum }}
            </el-col>
            <el-col :span="3" :offset="1">
              <el-button type="danger" plain @click="delnews(news.newsId)">
                删除
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ElMessageBox } from "element-plus"
import NewsHeader from "@/views/News/NewsHeader";
import NewsTime from "@/views/News/NewsTime";
import NewsMenu from "@/views/News/NewsMenu";
export default {
  name: "SpaceFrame",
  
  components: {
    NewsHeader,
    NewsTime,
    NewsMenu,
  },
  data() {
    return {
      newsli: [],
      searchVal:null,
    };
  },
  watch:{
    searchVal(){
      this.getnewsli()
    },
  },
  mounted() {
    this.getnewsli();
  },
  methods: {
    getnewsli() {
      this.$axios
        .get("/api/home/list?newsTitle=" + this.searchVal)
        .then((response) => {
          this.newsli = response.data;
        });
    },
    getlike(newsId){
      this.$axios
      .get("/api/home/like?newsId=" +newsId)
      .then(  response => {
        let data = response.data;
        if(data.code == 200){
          alert(data.msg);
          this.getlike();
        }else{
          alert("点赞失败")
        }
      })

    },
    getcollect(newsId){
      this.$axios
      .post("/api/news/detail/collect/add",{newsId:newsId})
      .then(response => {
        let data = response.data
        this.getnewsli();
        if(data.code == 200){
          alert(data.msg)
        }
        
        
      })
    },
    delnews(newsId) {
      ElMessageBox.confirm("是否删除这篇文章?","警告",{
        confirmButtonText:"是",
        cancelButtonText:"否", 
        type:"warning",
      }).then(() => {
         this.$axios
         .get("/api/space/news/del?newsId=" + newsId)
         .then((response) => {
           let data = response.data;
           if (data.code == 200) {
             alert(data.msg);
             this.getnewsli();
           }
           });
         });
    },



  },
};
</script>

<style>
</style>